<template>
	<view class="content">
		<view class="head">
		</view>
		<view class="head1">
			<image class="bg-set1" :src="bgimage"></image>
			<view class="meng1"></view>
		</view>
		<view class="info">
			<view class="info-left">
				<image class="head-image" :src="icon_wuxing"></image>
			</view>
			<view class="info-right">
				<view class="title">
					{{name}}
				</view>
				<view class="info-detail">
					{{info}}
				</view>
			</view>
		</view>
		<view class="items">
			<view class="item" v-for="(item,index) in lists" :key="index">
				<view class="item-left">
					<image :src="item.src" class="item-image"></image>
					<text class="item-text">{{item.text}}</text>
					<view class="process">
						<view class="process-num" :style="item.style">
							<text class="process-num-text">{{item.values}}</text>
						</view>
						<view class="process-item" :style="item.style">

						</view>
					</view>

				</view>
				<view class="item-right">
					<view class="add-btn jn-btn" @click="addJi(index)">
						+
					</view>
					<view class="jian-btn jn-btn" @click="jianJi(index)">
						-
					</view>
				</view>
			</view>
		</view>
		<view class="num">
			<view class="num-left">
				<text class="num-left-text">等级：</text>
				<input type="number" placeholder="0" v-model="level" class="level-input" @input="input" />
			</view>
			<view class="num-right">
				<text>可分配潜能点 {{all}}</text>
			</view>
		</view>
		<view class="info1">
			<view class="info1-item" v-for="(item,index) in info1" :key="index">
				<text class="info1-title info1-text">{{item.name}}:</text>
				<text class="info1-value info1-text">{{item.text}}</text>
			</view>
		</view>
		<view class="bottom">
			<view class="bottom-left">
				<view class="reset-btn btn" :style="resetcolor" @click="resetAll">重置潜能</view>
			</view>
			<view class="bottom-right">
				<view class="save-btn btn" @click="save">保存分配</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: "天王·刀天王",
				icon_wuxing:"",
				src: "../../../static/home/peizhuang/select.png",
				bgimage: "../../../static/home/menpai/emei.png",
				info: "活动期间，玩家可以通过礼包发放地址领取激活码。开服后大侠可在各大主城，新手村npc“龙儿”处输入激活码，即可兑换单思南新手礼包（自兑换起时限7天），开启礼。",
				all: 0,
				allB: 0,
				level: 0,
				max: 0,
				resetcolor:"color:#728C98",
				info1: [{
						name: "生命",
						text: "1128/1128"
					},
					{
						name: "内力",
						text: "1128/1128"
					},
					{
						name: "命中",
						text: "1身法/4"
					},
					{
						name: "命中",
						text: "1身法/4"
					}
				],
				lists: [{
						src: "../../../static/home/jineng/liliang.png",
						text: "力量",
						values: 0,
						style: "width:0%"
					},
					{
						src: "../../../static/home/jineng/waigong.png",
						text: "外功",
						values: 0,
						style: "width:0%"
					},
					{
						src: "../../../static/home/jineng/shenfa.png",
						text: "身法",
						values: 0,
						style: "width:0%"
					},
					{
						src: "../../../static/home/jineng/neigong.png",
						text: "内功",
						values: 0,
						style: "width:0%"
					}
				],
				listsBack: [{
						src: "../../../static/home/jineng/liliang.png",
						text: "力量",
						values: 0,
						style: "width:0%"
					},
					{
						src: "../../../static/home/jineng/waigong.png",
						text: "外功",
						values: 0,
						style: "width:0%"
					},
					{
						src: "../../../static/home/jineng/shenfa.png",
						text: "身法",
						values: 0,
						style: "width:0%"
					},
					{
						src: "../../../static/home/jineng/neigong.png",
						text: "内功",
						values: 0,
						style: "width:0%"
					}
				],
			}
		},
		onLoad()
		{
			this.icon_wuxing = this.$Global.WuXing_Res.jin.res
		},
		methods: {
			addJi(index) {
				if (this.all > 0) {
					this.resetcolor = "color:#FFFFFF"
					this.lists[index].values = this.lists[index].values + 1
					this.all = this.all - 1
					let process = this.lists[index].values/(this.level*5)*100
					this.lists[index].style = "width:"+process+"%"
				}else
				{
					this.resetcolor="color:#728C98"
				}

			},
			
			jianJi(index) {
				if (this.lists[index].values > 0) {
					this.lists[index].values = this.lists[index].values - 1
				     this.all = this.all + 1
					 let process = this.lists[index].values/(this.level*5)*100
					 this.lists[index].style = "width:"+process+"%"
				}
			},
			resetAll() {
				this.level = 0
				this.resetcolor="color:#728C98"
				for(var i=0;i<this.lists.length;i++)
				{
					this.lists[i].values = 0
					this.lists[i].style = "width:"+0+"%"
				}
				this.lists = this.listsBack
				this.all = this.allB
			},
			input(e) {
				console.log(e.target.value)
				this.resetcolor="color:#728C98"
				for(var i=0;i<4;i++)
				{
					this.lists[i].values = 0
					this.lists[i].style = "width:"+0+"%"
				}
				var value = e.target.value;
				if (Number(value) < 0) {
					this.level = 0;
				}
				else{
					this.lists = this.listsBack
					console.log(this.lists)
					this.level = e.target.value
					this.all = this.level*5
				}
			}
		}
	}
</script>

<style scoped>
	.flex-item {
		width: 33.3%;
		height: 200rpx;
		text-align: center;
		line-height: 200rpx;
	}

	.flex-item-V {
		width: 100%;
		height: 150rpx;
		text-align: center;
		line-height: 150rpx;
	}

	.text {
		margin: 15rpx 10rpx;
		padding: 0 20rpx;
		background-color: #ebebeb;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		color: #777;
		font-size: 26rpx;
	}

	page {
		background-color: #1F282C;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-bottom: 60rpx;
		background-color:#1F282C ;
	}

	.bottom {
		width: 100%;
		background-color:#1F282C ;
	}

	.bg-set {
		position: fixed;
		width: 100%;
		height: 326rpx;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.head {
		display: flex;
		float: left;
		/* z-index: 10000; */
		width: 100%;
		height: 326rpx;
		background-color: #1F282C;
	}
	.head1 {
/* 		display: flex; */
		float: left;
		z-index: 10000;
		width: 100%;
		height: 326rpx;
		margin-top: -410rpx;
		background-color: #1F282C;
	}
	.bg-set1 {
		/* position: fixed; */
		width: 100%;
		height: 326rpx;
		top: 0;
		left: 0;
		z-index: -1;
	}
	.meng1 {
		/* position: fixed; */
		/* margin-top: 68rpx; */
		margin-top: -180rpx;
		width: 750rpx;
		height: 173rpx;
		background: linear-gradient(0deg, rgba(78, 100, 110, 0.8), rgba(78, 100, 110, 0.01));
	}
	

	.meng {
		position: fixed;
		margin-top: 68rpx;
		width: 750rpx;
		height: 173rpx;
		background: linear-gradient(0deg, rgba(78, 100, 110, 0.8), rgba(78, 100, 110, 0.01));
	}

	.info {
		display: flex;
		float: left;
		z-index: 10001;
		width: 92%;
		height: 200rpx;
		margin-top: -100rpx;
		background-color: #405C69;
		border-radius: 10px;
	}

	.head-image {
		height: 100rpx;
		width: 50rpx;
	}

	.info .info-left {
		width: 60rpx;
		height: 100%;
	}

	.info .info-right {
		overflow: hidden;
		padding-bottom: 20rpx;
		padding-right: 20rpx;
	}

	.info .info-right .title {
		margin-top: 16rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		font-weight: 400;
	}

	.info .info-right .info-detail {
		margin-top: 16rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		color: #A0AAAF;
		font-size: 24rpx;
		line-break: 3;

	}

	.items {
		background-color: #1F282C;
		display: flex;
		width: 100%;
		z-index: 10001;
		flex-wrap: wrap;
		padding-top: 10rpx;
		margin-top: 30rpx;
	}

	.item {
		width: 100%;
		height: 120rpx;
		display: flex;
	}

	.item-left {
		width: 75%;
		margin-top: 10rpx;
		display: flex;
	}

	.process {
		height: 60rpx;
		width: 70%;
		margin-top: 10rpx;
		margin-left: 20rpx;
		/* background-color: #F0AD4E; */
		/* display: flex; */
	}

	.process-num {
		height: 40rpx;
		width: 100%;
		/* background-color: #09BB07; */
		text-align: center;
	}

	.process-num-text {
		font-size: 24rpx;
		font-weight: bold;
		color: #FFFFFF;
	}

	.process-item {
		height: 20rpx;
		width: 20%;
		background-color: #4B788D;
		background: linear-gradient(45deg, rgba(75, 120, 141, 1), rgba(255, 255, 255, 0.8));
		border-radius: 200rpx;
	}

	.item-image {
		width: 30rpx;
		height: 30rpx;
		margin-left: 30rpx;
		margin-top: 44rpx;
		margin-right: 15rpx;
	}

	.item-text {
		color: #FFFFFF;
		font-size: 32rpx;
		font-weight: 400;
		margin-top: 38rpx;
		color: #FFFFFF;
	}

	.item-right {
		width: 25%;
		height: 100%;
		margin-top: 38rpx;
		float: right;
	}

	.jian-btn {
		float: right;
	}

	.add-btn {
		float: right;
	}


	.jn-btn {
		width: 60rpx;
		line-height: 60rpx;
		height: 60rpx;
		text-align: center;
		margin-right: 24rpx;
		border: 1px solid #4C798E;
		border-radius: 50%;
		color: #FFFFFF;
	}



	.bottom {
		margin-top: 100rpx;
		width: 100%;
		display: flex;
	}

	.bottom-left {
		width: 50%;
		/* background-color: #0000FF; */

	}

	.bottom-right {
		/* background-color: #008000; */
		width: 50%;
	}

	.btn {
		text-align: center;
		width: 220rpx;
		height: 70rpx;
		border: 2rpx solid #728C98;
		border-radius: 35rpx;
		line-height: 70rpx;
	}

	.reset-btn {
		float: right;
		margin-right: 30rpx;
		font-size: 30rpx;
		font-weight: 400;
		color: #728C98;
	}

	.save-btn {
		float: left;
		margin-left: 30rpx;
		font-size: 30rpx;
		font-weight: 400;
		color: #FFFFFF;
	}


	.num {
		width: 90%;
		color: #728C98;
		font-size: 20rpx;
		margin-right: 25rpx;
		padding-bottom: 30rpx;
		margin-top: 20rpx;
		border-bottom: solid 1px #405C69
	}

	.num-left {
		float: left;
		width: 50%;
		height: 100%;
	}

	.num-right {
		float: right;
		width: 50%;
		height: 100%;
		text-align: right;
	}

	.num-left-text {
		margin-left: 70rpx;
		float: left;
		line-height: 40rpx;
	}

	.level-input {
		width: 87rpx;
		height: 40rpx;
		background: #405C69;
		border-radius: 4rpx;
		text-indent: 10rpx;
		font-size: 20rpx;
		color: #FFFFFF;
	}

	.input-placeholder {
		color: #FFFFFF;
	}

	.info1 {
		width: 100%;
		margin-top: 60rpx;
		/* display: flex; */
		/* background-color: #09BB07; */
	}

	.info1-item {
		width: 50%;
		height: 100rpx;
		float: left;
		/* background-color: #0000FF; */

	}

	.info1-text {
		margin-left: 30rpx;
		font-size: 32rpx;
		font-weight: 400;
	}

	.info1-title {
		color: #FFFFFF;
	}

	.info1-value {
		color: #F1EF41;
	}
</style>
